<template>
  <div class="login">
    <div class="title"><h3>登录页</h3></div>
    <van-form @submit="login">
      <van-field
        v-model="formData.phone"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号',pattern:/^1[3-9]\d{9}$/ }]"
      />
      <van-field
        v-model="formData.pass"
        type="password"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码',pattern:/^\d{4}$/ }]"
      />
      <div class="btn" >
        <van-button round block type="info" native-type="submit">登陆</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {user_login} from '../utils/api'
export default {
    data(){
        return{
            formData:{phone:'',pass:''}
        }
    },
    methods:{
    login(){
      user_login(this.formData).then((res)=>{
        if(res.data.code == 200){
            localStorage.setItem('token',res.data.token);
            localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo));
            this.$router.push('/');
            Toast.success('登陆成功!')
        }else{
          Toast.fail('登陆失败!')
        }
      })
    }
  }

};
</script>

<style lang="scss" scoped>
.login{
    margin: 20px 10px;
}
.title{
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
}
.van-field{
    margin: 30px 0;
    border: 1px solid #ccc;
    border-radius: 20px;
}
.btn{
    background: #ccc;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}
</style>